<div>
    <p class="basicInfo">
        远程图像处理
    </p>
    <el-row>
        <el-col :span="isActive ? 20 : 12">
            <div class="imgDivContainer">
                <div style="background: white;height: 5px;width: calc(100% - 15px);top:1px;position:absolute;z-index: 999;"></div>
                <div style="position: sticky;top:0px;z-index: 999;">
                    <div class="imgToolsDiv">
                        <div style="display: inline-flex;justify-content: flex-end;align-items: center;margin-left:10px;">
                            <el-button type="danger" size="mini" @click.stop.prevent="allCaptureScreen">
                                全屏截图
                            </el-button>
                            <el-button type="danger" size="mini" @click.stop.prevent="sendImgAction('remoteClipGrayscaleAndThresholdToServer')">
                                图像处理
                            </el-button>
                            <el-button type="danger" size="mini" @click.stop.prevent="sendImgAction('remoteClipGrayscaleAndThresholdAnalysisChartToServer')">
                                文字识别
                            </el-button>
                            <el-button type="danger" size="mini" @click.stop.prevent="loadPreviewImg">
                                加载图片
                            </el-button>
                            <el-button type="danger" size="mini" @click.stop.prevent="allCaptureScreenScale" :disabled="disabledAllCaptureScreenScale">
                                全屏裁剪
                            </el-button>
                            <span style="margin-left: 5px; ">屏幕方向：</span>
                            <el-radio-group v-model="screenDirection" style="margin-top: 3px;">
                                <el-radio label="横屏">
                                    横屏方向
                                </el-radio>
                                <el-radio label="竖屏">
                                    竖屏方向
                                </el-radio>
                            </el-radio-group>
                            <span style="margin-left: 10px;font-weight: 600;">{{ remoteHandler.param1.isOpenFastClip ? "裁剪模式" : "预览模式" }}</span>
                            <span v-popover:popover1 class="link-black" style="display: flex; font-size: 21px; margin-left: 10px; cursor: pointer">
                          <i class="el-icon-question" />
                        </span>
                            <el-popover ref="popover1" placement="top-start" width="500" trigger="hover">
                                <div>
                                    <b>全屏截图:</b>
                                    <span>默认进行坐标全屏,然后执行图像处理的操作。</span>
                                </div>
                                <div style="margin-top: 10px;">
                                    <b>图像处理:</b>
                                    <span>根据右侧的常用参数,远程执行图像处理,支持设置灰度化,阈值化。(处理后图片默认上传web文件目录)</span>
                                </div>
                                <div style="margin-top: 10px;">
                                    <b>文字识别:</b>
                                    <span>在图像处理的基础上,基于谷歌MLKitOCR进行文字识别,并显示识别结果。</span>
                                </div>
                                <div style="margin-top: 10px;">
                                    <b>加载图片:</b>
                                    <span>根据右侧的图片名称,加载web端的图片。</span>
                                </div>
                                <div style="margin-top: 10px;">
                                    <b>全屏裁剪:</b>
                                    <span>请执行全屏截图后,再执行全屏裁剪操作。(以下三种情况不可用:1、没有预览图 2、坐标未全屏 3、预览图不是全屏预览图)</span>
                                </div>
                                <div style="margin-top: 10px;">
                                    <b>屏幕方向:</b>
                                    <span>所选设备的屏幕方向,手机端旋转屏幕时,会自动监听变化。(如果监听失效,可手动修改)</span>
                                </div>
                                <div style="margin-top: 10px;">
                                    <b>预览模式:</b>
                                    <span>点击预览图片,自动获取坐标和颜色值</span>
                                </div>
                                <div style="margin-top: 10px;">
                                    <b>裁剪模式:</b>
                                    <span>基于全屏截图,获取全屏的截图,按下鼠标框选需要裁剪的区域,松开鼠标裁剪图片。</span>
                                </div>
                                <div style="margin-top: 10px;">
                                    <b>截图异常怎么办:</b>
                                    <span>1、检查app是否授予后台运行权限。2、尝试刷新截图权限(点击右上角刷新截图权限按钮)</span>
                                </div>
                            </el-popover>
                        </div>
                    </div>
                    <div style="background: white;padding-top: 10px;">
                        <el-row class="d-flex width100">
                            <el-button type="primary" size="mini" @click.stop.prevent="saveImage" v-if="remoteHandler.param1.previewImg">
                                保存图片到Web
                            </el-button>
                            <el-button type="primary" size="mini" @click.stop.prevent="saveImageToPhone" v-if="remoteHandler.param1.previewImg">
                                保存图片到手机
                            </el-button>
                        </el-row>
                        <div style="display: flex;width: 100%;" v-if="remoteHandler.param1.previewImg">
                            <el-slider style="flex:1;" v-model="previewImageWidth" show-input></el-slider>
                        </div>
                    </div>
                </div>
                <div class="width100">
                    <div class="width100">
                        <div class="d-flex j-center width100">
                            <div draggable="false" :style="{width:previewImageWidth+'%'}" v-loading="imgDrawLoading" style="user-select: none;min-height: 40vh;display: flex;justify-content: center;align-items: center;text-align: center;">
                                <div id="drawArear" class="draw-box" v-if="remoteHandler.param1.previewImg"
                                     style="width: auto;margin: 0; padding: 0;height: auto;max-width: 100%;user-select: none;">
                                    <img id="previewImg" draggable="false"  style="width:100%;margin: 0; padding: 0;height: 100%;user-select: none;"
                                         alt="" />
                                    <div class="react-box" id="drawReact" draggable="false" style="user-select: none;">
                                    </div>
                                </div>
                                <div v-else style="font-size: 30px;color: rgba(29,140,128,0.29)">
                                    暂无图片,可进行以下操作【全屏截图】【图像处理】【文字识别】【加载图片】,具体区别见上方Tips提示
                                </div>
                                <canvas id="canvas" style="display:none;"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :span="4">
            <div class="imgDivContainer" style="margin: 0 10px;display: flex;flex-direction: column;position: relative;">
                <div class="mousePositionDiv">
                    <span class="mousePositionX">
                         x:{{imgMousePosition.x }}
                    </span>
                    <span class="mousePositionY">
                        y:{{imgMousePosition.y}}
                    </span>
                    <span class="mousePositionColor">
                        color:{{imgMousePosition.color}}
                    </span>
                </div>
                <span v-popover:popover2 class="link-black" style="font-size: 21px; position: absolute;top:0;right: 0; cursor: pointer">
                          <i class="el-icon-question" />
                </span>
                <div class="mousePositionCls">
                    <canvas id="canvasScale">
                    </canvas>
                    <div v-for="(cell,index) in cells" class="cell" :class="{'selectCell':index === 112}"></div>
                </div>
                <div style="margin-top: 10px;" class="d-flex">
                    <el-button type="primary" class="flex-1" size="mini" @click.stop.prevent="setParam1(true)">
                        全屏坐标
                    </el-button>
                    <el-button type="primary" class="flex-1" size="mini" @click.stop.prevent="readPositionList">
                        读取坐标
                    </el-button>
                    <el-button type="primary" class="flex-1" size="mini" @click.stop.prevent="clearPosition">
                        清空坐标
                    </el-button>
                </div>
                <el-popover ref="popover2" placement="top-start" width="500" trigger="hover">
                    <div>
                        <b>全屏坐标:</b>
                        <span>根据设备屏幕方向,设备尺寸,将全屏坐标写入右侧常用参数坐标中。</span>
                    </div>
                    <div style="margin-top: 10px;">
                        <b>读取坐标:</b>
                        <span>读取坐标列表中最后两个坐标,并将其写入右侧常用参数坐标中。</span>
                    </div>
                    <div style="margin-top: 10px;">
                        <b>清空坐标:</b>
                        <span>清空坐标列表中的全部坐标。</span>
                    </div>
                </el-popover>
                <div style="height: 100%;margin-top: 10px;flex: 1;">
                    <el-input type="textarea" v-model="remoteHandler.param1.positionList" style="height: 100%;"
                              placeholder="点击预览图片,获取点击位置的坐标,坐标列表可以用于解析坐标区域,多点找色等"  class="width100 positionInput">
                    </el-input>
                </div>
            </div>
            <div class="hamburger" @click.stop="isActive=!isActive">
                <i class="el-icon-arrow-right" :class="{'rotate': isActive}" />
            </div>
        </el-col>
        <el-col :span="isActive ? 0 : 8">
            <div class="imgDivContainer">
                <div>
                    <el-card>
                        <div slot="header" class="clearfix" style="cursor: pointer;" @click.stop="arrowArr.commonParam=!arrowArr.commonParam">
                            <span>常用参数</span>
                            <i :class="{'el-icon-arrow-down':arrowArr.commonParam,'el-icon-arrow-up':!arrowArr.commonParam}"  style="float: right;"></i>
                        </div>
                        <div style="padding: 15px 0 20px 0;" v-show="arrowArr.commonParam">
                            <el-row class="d-flex">
                                <div class="width100 d-flex a-center flex-wrap">
                                    <el-form-item label="图片名称:" prop="localImageName" label-width="100px" class="flex-1">
                                        <div class="width100 d-flex ">
                                            <el-input v-model="remoteHandler.param1.localImageName" placeholder="请输入图片名称"
                                                      class="flex-1" />
                                            <el-button type="primary" style="display: flex;margin-left: 5px;" size="mini" @click.stop.prevent="resetImageName">
                                                重置名称
                                            </el-button>
                                        </div>
                                    </el-form-item>
                                </div>
                            </el-row>
                            <el-row class="d-flex">
                                <el-form-item label="坐标x1:" prop="x1" label-width="100px" class="flex-1">
                                    <el-input type="number" v-model="remoteHandler.param1.x1" oninput="if(value.length>10)value=value.slice(0,10)"
                                              min="0" placeholder="请输入坐标值" class="width100">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="坐标y1:" prop="y1" label-width="100px" class="flex-1">
                                    <el-input type="number" min="0" oninput="if(value.length>10)value=value.slice(0,10)"
                                              v-model="remoteHandler.param1.y1" placeholder="请输入坐标值" class="width100">
                                    </el-input>
                                </el-form-item>
                            </el-row>
                            <el-row class="d-flex">
                                <el-form-item label="坐标x2:" prop="x1" label-width="100px" class="flex-1">
                                    <el-input type="number" v-model="remoteHandler.param1.x2" oninput="if(value.length>10)value=value.slice(0,10)"
                                              min="0" placeholder="请输入坐标值" class="width100">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="坐标y2:" prop="y2" label-width="100px" class="flex-1">
                                    <el-input type="number" min="0" oninput="if(value.length>10)value=value.slice(0,10)"
                                              v-model="remoteHandler.param1.y2" placeholder="请输入坐标值" class="width100">
                                    </el-input>
                                </el-form-item>
                            </el-row>
                            <el-row class="d-flex">
                                <el-form-item label="阈值化相似度:" prop="threshold" label-width="100px" class="flex-1">
                                    <el-input type="number" :min="0" :max="255" oninput="if(value.length>10)value=value.slice(0,10)"
                                              v-model="remoteHandler.param1.threshold" placeholder="请输入阈值化相似度" class="width100">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="阈值化最大值:" prop="maxVal" label-width="100px" class="flex-1">
                                    <el-input type="number" :min="0" :max="255" oninput="if(value.length>10)value=value.slice(0,10)"
                                              v-model="remoteHandler.param1.maxVal" placeholder="请输入阈值化最大值" class="width100">
                                    </el-input>
                                </el-form-item>
                            </el-row>
                            <el-row>
                                <div style="display: inline-flex;justify-content: flex-end;align-items: center;margin-left:10px;">
                            <span>
                                开启灰度化：
                            </span>
                                    <el-switch v-model="remoteHandler.param1.isOpenGray" />
                                </div>
                                <div style="display: inline-flex;justify-content: flex-end;align-items: center;margin-left:10px;">
                            <span>
                                开启阈值化：
                            </span>
                                    <el-switch v-model="remoteHandler.param1.isOpenThreshold" />
                                </div>
                            </el-row>
                        </div>
                    </el-card>
                </div>
                <div style="margin-top: 10px;">
                    <el-card>
                        <div slot="header" class="clearfix" style="cursor: pointer;" @click.stop="arrowArr.otherParam=!arrowArr.otherParam">
                            <span>其他参数</span>
                            <i :class="{'el-icon-arrow-down':arrowArr.otherParam,'el-icon-arrow-up':!arrowArr.otherParam}"  style="float: right;"></i>
                        </div>
                        <div style="padding: 15px 0 20px 0;" v-show="arrowArr.otherParam">
                            <el-row class="d-flex">
                                <el-form-item label="图片相似度:" prop="threshold" label-width="100px" class="flex-1">
                                    <el-input type="number" min="0" step="0.1" max="1" oninput="if(value.length>10)value=value.slice(0,10)"
                                              v-model="remoteHandler.param1.imgThreshold" placeholder="请输入图片相似度" class="width100">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="颜色相似度:" prop="threshold" label-width="100px" class="flex-1">
                                    <el-input type="number" :min="0" :max="255" oninput="if(value.length>10)value=value.slice(0,10)"
                                              v-model="remoteHandler.param1.colorThreshold" placeholder="请输入颜色相似度" class="width100">
                                    </el-input>
                                </el-form-item>
                            </el-row>
                            <el-row class="d-flex">
                                <el-form-item label="大图缩放比例:" prop="bigScale" label-width="100px" class="flex-1">
                                    <el-input type="number" min="0" step="0.1" max="1" oninput="if(value.length>10)value=value.slice(0,10)"
                                              v-model="remoteHandler.param1.bigScale" placeholder="请输入大图缩放比例" class="width100">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="小图缩放比例:" prop="smallScale" label-width="100px" class="flex-1">
                                    <el-input type="number" min="0" step="0.1" max="1" oninput="if(value.length>10)value=value.slice(0,10)"
                                              v-model="remoteHandler.param1.smallScale" placeholder="请输入小图缩放比例" class="width100">
                                    </el-input>
                                </el-form-item>
                            </el-row>
                            <el-row class="d-flex">
                                <el-form-item label="文字识别:" prop="context" label-width="100px" class="flex-1">
                                    <el-input v-model="remoteHandler.param1.context" placeholder="请输入文字识别内容"
                                              class="width100" />
                                </el-form-item>
                                <el-form-item label="多条件匹配:" prop="smallScale" label-width="100px" class="flex-1">
                                    <el-switch v-model="remoteHandler.param1.openSplit" />
                                </el-form-item>
                            </el-row>
                        </div>
                    </el-card>
                </div>
                <div style="margin-top: 10px;">
                    <el-card>
                        <div slot="header" class="clearfix" style="cursor: pointer;" @click.stop="arrowArr.scriptPreview=!arrowArr.scriptPreview">
                            <span>代码预览</span>
                            <i :class="{'el-icon-arrow-down':arrowArr.scriptPreview,'el-icon-arrow-up':!arrowArr.scriptPreview}"  style="float: right;"></i>
                        </div>
                        <div style="padding: 15px 0 20px 0;" v-show="arrowArr.scriptPreview">
                            <el-row class="d-flex">
                                <el-input type="textarea" v-model="remoteHandler.param1.scriptPreview"
                                          placeholder="点击生成代码后,预览代码显示的区域" :rows="5" class="width100">
                                </el-input>
                            </el-row>
                        </div>
                    </el-card>
                </div>
                <div style="margin-top: 10px;">
                    <el-card>
                        <div slot="header" class="clearfix" style="cursor:pointer;" @click.stop="arrowArr.jsonParam=!arrowArr.jsonParam">
                            <span>json参数</span>
                            <i :class="{'el-icon-arrow-down':arrowArr.jsonParam,'el-icon-arrow-up':!arrowArr.jsonParam}"  style="float: right;"></i>
                        </div>
                        <div style="padding: 15px 0 20px 0;" v-show="arrowArr.jsonParam">
                            <el-row class="d-flex">
                                <el-input type="textarea" v-model="remoteHandler.param1.paramJson"
                                          placeholder="参数的JSON形式,快速解析参数,可用于页面匹配功能" :rows="5" class="width100">
                                </el-input>
                            </el-row>
                        </div>
                    </el-card>
                </div>
                <div style="margin-top: 10px;">
                   <el-card>
                       <div slot="header" class="clearfix" style="cursor: pointer;" @click.stop="arrowArr.otherOperate=!arrowArr.otherOperate">
                           <span>更多操作</span>
                           <i :class="{'el-icon-arrow-down':arrowArr.otherOperate,'el-icon-arrow-up':!arrowArr.otherOperate}"  style="float: right;"></i>
                       </div>
                       <div style="padding: 15px 0 20px 0;" v-show="arrowArr.otherOperate">
                           <div class="d-flex j-start flex-wrap" style="line-height: 35px;text-align: center;">
                               <el-button type="danger" size="mini" style="margin-left:10px;margin-bottom: 5px;width: 120px;" @click.stop.prevent="execPreviewScript">
                                   执行代码
                               </el-button>
                               <el-dropdown trigger="click">
                                   <el-button type="primary" style="margin-left:10px;margin-bottom: 5px;width: 120px;" size="mini">
                                       生成代码(官方)
                                   </el-button>
                                   <el-dropdown-menu slot="dropdown">
                                       <el-dropdown-item @click.native.prevent.stop="generateCode('grayscale')">
                                           灰度化grayscale
                                       </el-dropdown-item>
                                       <el-dropdown-item @click.native.prevent.stop="generateCode('threshold')">
                                           阈值化threshold
                                       </el-dropdown-item>
                                       <el-dropdown-item @click.native.prevent.stop="generateCode('clip')">
                                           裁图clip
                                       </el-dropdown-item>
                                       <el-dropdown-item @click.native.prevent.stop="generateCode('findImage')">
                                           找图findImage
                                       </el-dropdown-item>
                                       <el-dropdown-item @click.native.prevent.stop="generateCode('detectAndComputeFeatures')">
                                           收集特征detectAndComputeFeatures(AutoX不适用)
                                       </el-dropdown-item>
                                       <el-dropdown-item @click.native.prevent.stop="generateCode('matchFeatures')">
                                           特征匹配matchFeatures(AutoX不适用)
                                       </el-dropdown-item>
                                       <el-dropdown-item @click.native.prevent.stop="generateCode('findMultiColors')">
                                           多点找色findMultiColors
                                       </el-dropdown-item>
                                       <el-dropdown-item @click.native.prevent.stop="generateCode('MLKitOCR')">
                                           MLKitOCR文字识别(AutoX不适用)
                                       </el-dropdown-item>
                                       <el-dropdown-item @click.native.prevent.stop="generateCode('MLKitOCR_AUTO_X')">
                                           MLKitOCR_AUTO_X文字识别
                                       </el-dropdown-item>
                                       <el-dropdown-item @click.native.prevent.stop="generateCode('matchTemplate')">
                                           模板匹配matchTemplate
                                       </el-dropdown-item>
                                   </el-dropdown-menu>
                               </el-dropdown>
                               <el-dropdown trigger="click">
                                   <el-button type="primary" style="margin-left:10px;margin-bottom: 5px;width: 120px;" size="mini">
                                       生成代码(基础)
                                   </el-button>
                                   <el-dropdown-menu slot="dropdown">
                                       <el-dropdown-item @click.native.prevent.stop="generateCode('getConvertCoefficient')">
                                           获取分辨率转换系数getConvertCoefficient
                                       </el-dropdown-item>
                                       <el-dropdown-item @click.native.prevent.stop="generateCode('scaleSmallImg')">
                                           按照分辨率缩放小图scaleSmallImg
                                       </el-dropdown-item>
                                       <el-dropdown-item @click.native.prevent.stop="generateCode('convertXY')">
                                           按照分辨率转换坐标convertXY
                                       </el-dropdown-item>
                                       <el-dropdown-item @click.native.prevent.stop="generateCode('detectFeaturesScale')">
                                           图片特征匹配detectFeaturesScale(AutoX不适用)
                                       </el-dropdown-item>
                                       <el-dropdown-item @click.native.prevent.stop="generateCode('matchingFeatures')">
                                           灰度化阈值化特征匹配matchingFeatures(AutoX不适用)
                                       </el-dropdown-item>
                                       <el-dropdown-item @click.native.prevent.stop="generateCode('randomClick')">
                                           随机点击randomClick
                                       </el-dropdown-item>
                                       <el-dropdown-item @click.native.prevent.stop="generateCode('grayscaleAndThreshold2')">
                                           灰度化阈值化图片grayscaleAndThreshold2
                                       </el-dropdown-item>
                                       <el-dropdown-item @click.native.prevent.stop="generateCode('grayThresholdFindImg2')">
                                           灰度化阈值化找图grayThresholdFindImg2
                                       </el-dropdown-item>
                                       <el-dropdown-item @click.native.prevent.stop="generateCode('grayThresholdFindMultipleColor2')">
                                           灰度化阈值化多点找色grayThresholdFindMultipleColor2
                                       </el-dropdown-item>
                                       <el-dropdown-item @click.native.prevent.stop="generateCode('ocrGetContentStr')">
                                           ocr获取文字识别内容字符串结果ocrGetContentStr
                                       </el-dropdown-item>
                                       <el-dropdown-item @click.native.prevent.stop="generateCode('ocrGetResultToCanvas')">
                                           ocr获取文字识别内容并绘图ocrGetResultToCanvas
                                       </el-dropdown-item>
                                       <el-dropdown-item @click.native.prevent.stop="generateCode('canvasRect')">
                                           绘制方框canvasRect
                                       </el-dropdown-item>
                                   </el-dropdown-menu>
                               </el-dropdown>
                               <el-dropdown trigger="click">
                                   <el-button type="primary" style="margin-left:10px;margin-bottom: 5px;width: 120px;" size="mini">
                                       生成代码(进阶)
                                   </el-button>
                                   <el-dropdown-menu slot="dropdown">
                                       <el-dropdown-item @click.native.prevent.stop="generateCode('regionalFindImg2')">
                                           区域找图regionalFindImg2
                                       </el-dropdown-item>
                                       <el-dropdown-item @click.native.prevent.stop="generateCode('regionalClickImg2')">
                                           区域找图点击regionalClickImg2
                                       </el-dropdown-item>
                                       <el-dropdown-item @click.native.prevent.stop="generateCode('regionalAnalysisChart2')">
                                           区域识字获取文字regionalAnalysisChart2
                                       </el-dropdown-item>
                                       <el-dropdown-item @click.native.prevent.stop="generateCode('regionalAnalysisChartPosition2')">
                                           区域识字获取坐标regionalAnalysisChartPosition2
                                       </el-dropdown-item>
                                       <el-dropdown-item @click.native.prevent.stop="generateCode('regionalClickText2')">
                                           区域识字点击regionalClickText2
                                       </el-dropdown-item>
                                       <el-dropdown-item @click.native.prevent.stop="generateCode('regionalClickText3')">
                                           区域识字点击regionalClickText3
                                       </el-dropdown-item>
                                       <el-dropdown-item @click.native.prevent.stop="generateCode('regionalMatchTemplate2')">
                                           区域模板匹配regionalMatchTemplate2
                                       </el-dropdown-item>
                                       <el-dropdown-item @click.native.prevent.stop="generateCode('regionalMatchingFeatures')">
                                           区域特征匹配regionalMatchingFeatures(AutoX不适用)
                                       </el-dropdown-item>
                                       <el-dropdown-item @click.native.prevent.stop="generateCode('regionalMatchFeaturesTemplate')">
                                           区域特征匹配模板regionalMatchFeaturesTemplate(AutoX不适用)
                                       </el-dropdown-item>
                                       <el-dropdown-item @click.native.prevent.stop="generateCode('regionalClickFeatures')">
                                           区域特征匹配点击regionalClickFeatures(AutoX不适用)
                                       </el-dropdown-item>
                                       <el-dropdown-item @click.native.prevent.stop="generateCode('regionalFindMultipleColor2')">
                                           区域多点找色regionalFindMultipleColor2
                                       </el-dropdown-item>
                                       <el-dropdown-item @click.native.prevent.stop="generateCode('regionalClickColor2')">
                                           区域多点找色点击regionalClickColor2
                                       </el-dropdown-item>
                                       <el-dropdown-item @click.native.prevent.stop="generateCode('regionalFindImgOrFeatures')">
                                           区域找图或者特征匹配regionalFindImgOrFeatures(AutoX不适用)
                                       </el-dropdown-item>
                                       <el-dropdown-item @click.native.prevent.stop="generateCode('regionalMatchTemplateOrMatchFeatures')">
                                           区域模板匹配或者特征匹配模板regionalMatchTemplateOrMatchFeatures(AutoX不适用)
                                       </el-dropdown-item>
                                       <el-dropdown-item @click.native.prevent.stop="generateCode('regionalFindCircles2')">
                                           区域灰度化阈值化找圆regionalFindCircles2
                                       </el-dropdown-item>
                                   </el-dropdown-menu>
                               </el-dropdown>
                               <el-button type="primary" style="margin-left:10px;margin-bottom: 5px;width: 120px;" size="mini" @click.stop.prevent="readJsonFromClipboard">
                                   从剪切板读取json
                               </el-button>
                               <el-button type="primary" style="margin-left:10px;margin-bottom: 5px;width: 120px;" size="mini" @click.stop.prevent="readParamFromJson">
                                   从json读取参数
                               </el-button>
                               <el-button type="primary" style="margin-left:10px;margin-bottom: 5px;width: 120px;" size="mini" @click.stop.prevent="generateParamToJson">
                                   参数生成json
                               </el-button>
                               <el-button type="primary" style="margin-left:10px;margin-bottom: 5px;width: 120px;" size="mini" @click.stop.prevent="copyJsonToClipboard">
                                   json写入剪切板
                               </el-button>
                           </div>
                       </div>
                   </el-card>
                </div>
            </div>
        </el-col>
    </el-row>

 <!--   <el-row>
        <el-form-item label="参数JSON:" class="width100">
            <el-input type="textarea" v-model="remoteHandler.param1.paramJson"
                      placeholder="参数的JSON形式,快速解析参数,可用于页面匹配功能" :rows="4" class="width100">
            </el-input>
        </el-form-item>
    </el-row>
    <el-row>
        <div class="width100 d-flex a-center flex-wrap">

            <el-form-item style="flex:5;display: flex;justify-content: flex-end;">

                <el-button type="primary" style="margin-left:10px" size="mini" @click.stop.prevent="setParam1(true)">
                    坐标全屏
                </el-button>
                <el-button type="primary" style="margin-left:10px" size="mini" @click.stop.prevent="readPositionList">
                    读取坐标列表
                </el-button>
                <el-button type="primary" style="margin-left:10px" size="mini" @click.stop.prevent="clearPosition">
                    清空坐标列表
                </el-button>
                <el-button type="primary" style="margin-left:10px" size="mini" @click.stop.prevent="param1Subtract">
                    减去坐标值
                </el-button>
                <el-button type="primary" style="margin-left:10px" size="mini" @click.stop.prevent="param1Addition">
                    加上坐标值
                </el-button>

            </el-form-item>
        </div>
    </el-row>
    <el-row>
        <div class="width100 d-flex a-center">
            <el-form-item prop="previewImg" class="width100 previewImgCls" style="display: flex;justify-content: flex-end;align-items: center;text-align: center;">
                <div style="display: inline-flex;justify-content: flex-end;align-items: center;margin-left:10px;">
                    <span>
                        显示浮动控制面板：
                    </span>
                    <el-switch v-model="remoteHandler.param1.showFixedPositionList" />
                </div>


                <el-button type="danger" style="margin-left:10px" size="mini" @click.stop.prevent="sendImgAction('remoteClipGrayscaleAndThresholdToServer')">
                    图像处理(加载)
                </el-button>
                <el-button type="danger" style="margin-left:10px" size="mini" @click.stop.prevent="sendImgAction('remoteClipGrayscaleAndThresholdAnalysisChartToServer')">
                    文字识别
                </el-button>
                <el-button type="primary" size="mini" style="margin-left:10px" id="loadPreviewImg"
                           @click.stop.prevent="loadPreviewImg">
                    加载图片
                </el-button>

            </el-form-item>
        </div>
    </el-row>
    <el-row>

        <div class="positionListFixed" v-show="remoteHandler.param1.showFixedPositionList">
            <div class="buttonPanel">

                <el-button type="primary" size="mini" @click.stop.prevent="readPositionList">
                    读取坐标列表
                </el-button>
                <el-button type="primary" size="mini" @click.stop.prevent="clearPosition">
                    清空坐标列表
                </el-button>
            </div>
            <el-input class="positionTextarea" type="textarea" v-model="remoteHandler.param1.positionList">
            </el-input>
        </div>
    </el-row>-->
</div>